<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>
<!-- 成员联系客户统计 -->
<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="contact_cus_kpi">
        <div class="header">
            <div class="back">返回</div>
            <div class="type_select_wrapper">成员联系客户统计</div>
        </div>
        <div class="container">
            <div class="group_record">
                <div class="title">联系概况</div>
            </div>
            <div class="screen_wrapper">
                <div class="screen_tab">
                    <ul>
                        <li class="active">昨日</li>
                        <li>近七日</li>
                        <li>近30日</li>
                    </ul>
                </div>
                <div class="screen_date">
                    <span class="text">自定义：</span>
                    <input class="layui-input" type="text" id="start_date">
                    <span class="units">至</span>
                    <input class="layui-input" type="text" id="end_date">
                </div>
                <div class="member_depart">
                    <span>成员/部门：</span>
                    <div class="member_depart_select" id="member_depart_select">全部</div>
                </div>
            </div>
            <a href="javascript:;" class="normal_btn exporting_record">导出记录</a>
            <div class="table_wrapper">
                <table class="layui-table member_contact_cus_table">
                    <thead>
                        <tr>
                            <th class="memberWidth">成员</th>
                            <th>发起申请数</th>
                            <th>新增客户数</th>
                            <th>聊天总数</th>
                            <th>发送消息数</th>
                            <th>已回复聊天占比</th>
                            <th>平均首次回复时长</th>
                            <th>删除/拉黑成员的客户数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="memberWidth">
                                <div>刘毅华</div>
                                <div class="department" title="沃邦咨询/长沙峰之道长沙峰之道">沃邦咨询/长沙峰之道长沙峰之道</div>
                            </td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>--</td>
                            <td>--</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td class="memberWidth">
                                <div>吴访</div>
                                <div class="department" title="沃邦咨询/长沙峰之道长沙峰之道">沃邦咨询/长沙峰之道长沙峰之道</div>
                            </td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>--</td>
                            <td>--</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td class="memberWidth">
                                <div>叶铠齐</div>
                                <div class="department" title="沃邦咨询/长沙峰之道">沃邦咨询/长沙峰之道</div>
                            </td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>--</td>
                            <td>--</td>
                            <td>0</td>
                        </tr>
                    </tbody>
                </table>
                <div class="paging_style" id="paging"></div>
            </div>
        </div>
    </div>

    <!-- 成员部门模态框 -->
    <div class="modal fade" id="addperson_modal" tabindex="-1" role="dialog" aria-labelledby="addperson_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addperson_modal_label">选择发送范围</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="protree_container"></div>
                        </div>
                        <div class="right_wrapper">
                            <div class="title">已选择的部门或成员</div>
                            <div class="selected">
                                <div class="department_members selected_department" id="selected_department">

                                </div>
                                <div class="department_members selected_members" id="selected_members">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submit_dep_member">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 成员部门模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <!-- 图表 -->
    <script src="../../js/highcharts/highcharts.js"></script>
    <script src="../../js/highcharts/exporting.js"></script>
    <script src="../../js/highcharts/no-data-to-display.js"></script>
    <!-- 公共方法 -->
    <script src="../../js/addPerson_data/data.js"></script>
    <script>
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true
            },
            {
                id: 10,
                name: '子公司',
                pid: 1,
                department: true
            },
            {
                id: 3,
                name: "刘毅华",
                pid: 1,
                department: false
            },
            {
                id: 4,
                name: "叶铠齐",
                pid: 1,
                department: false
            },
            {
                id: 5,
                name: "梁小玲",
                pid: 1,
                department: false
            },
            {
                id: 6,
                name: "吴访",
                pid: 10,
                department: false
            },
            {
                id: 7,
                name: "赵虹蕊",
                pid: 2,
                department: false
            },
            {
                id: 8,
                name: "吕海洋",
                pid: 2,
                department: false
            },
            {
                id: 9,
                name: "曾红云",
                pid: 2,
                department: false
            }
        ];
        layui.use('layer', function () {
            var layer = layui.layer;
            // 返回
            $(".back").click(function () {
                self.location.href = "contact-cus-kpi.html"
            })
            layui.use('form', function () {
                var form = layui.form;
                // 2020-02-06 Version1.0
                // 昨天的日期
                let preDate = getPreDate()
                // 前7天的日期
                let pre_7_Date = getPreDate(7)
                // 前30天的日期
                let pre_30_Date = getPreDate(30)

                // 选择的开始日期 结束日期
                let startDateSelected = preDate // 自定义开始日期
                let endDateSelected = preDate // 自定义结束日期
                layui.use('laydate', function () {
                    var laydate = layui.laydate;

                    // 自定义开始日期
                    var startDate = laydate.render({
                        elem: '#start_date',
                        value: preDate,
                        min: pre_30_Date,
                        max: preDate,
                        btns: ['clear', 'confirm'],
                        done(value, date) {
                            startDateSelected = value
                            endDate.config.min = {
                                year: date.year,
                                month: date.month - 1,
                                date: date.date
                            };
                        }
                    })

                    // 自定义结束日期
                    var endDate = laydate.render({
                        elem: '#end_date',
                        value: preDate,
                        min: pre_30_Date,
                        max: preDate,
                        btns: ['clear', 'confirm'],
                        done(value, date) {
                            endDateSelected = value
                        }
                    })

                    // 日期tab切换 默认进来是昨日的tab
                    let dateTabSelect = "昨日"
                    $(".screen_tab ul li").click(function () {
                        dateTabSelect = $(this).text()
                        $(this).addClass("active").siblings().removeClass("active")
                        if (dateTabSelect == '昨日') {
                            // 自定义开始日期
                            let startDate = laydate.render({
                                elem: '#start_date',
                                value: preDate,
                                min: pre_30_Date,
                                max: preDate,
                                btns: ['clear', 'confirm'],
                                done(value, date) {
                                    startDateSelected = value
                                    endDate.config.min = {
                                        year: date.year,
                                        month: date.month - 1,
                                        date: date.date
                                    };
                                }
                            })

                            // 自定义结束日期
                            let endDate = laydate.render({
                                elem: '#end_date',
                                value: preDate,
                                min: pre_30_Date,
                                max: preDate,
                                btns: ['clear', 'confirm'],
                                done(value, date) {
                                    endDateSelected = value
                                }
                            })
                        } else if (dateTabSelect == '近七日') {
                            // 自定义开始日期
                            let startDate = laydate.render({
                                elem: '#start_date',
                                value: pre_7_Date,
                                min: pre_30_Date,
                                max: preDate,
                                btns: ['clear', 'confirm'],
                                done(value, date) {
                                    startDateSelected = value
                                    endDate.config.min = {
                                        year: date.year,
                                        month: date.month - 1,
                                        date: date.date
                                    };
                                }
                            })

                            // 自定义结束日期
                            let endDate = laydate.render({
                                elem: '#end_date',
                                value: preDate,
                                min: pre_30_Date,
                                max: preDate,
                                btns: ['clear', 'confirm'],
                                done(value, date) {
                                    endDateSelected = value
                                }
                            })
                        } else if (dateTabSelect == '近30日') {
                            // 自定义开始日期
                            let startDate = laydate.render({
                                elem: '#start_date',
                                value: pre_30_Date,
                                min: pre_30_Date,
                                max: preDate,
                                btns: ['clear', 'confirm'],
                                done(value, date) {
                                    startDateSelected = value
                                    endDate.config.min = {
                                        year: date.year,
                                        month: date.month - 1,
                                        date: date.date
                                    };
                                }
                            })

                            // 自定义结束日期
                            let endDate = laydate.render({
                                elem: '#end_date',
                                value: preDate,
                                min: pre_30_Date,
                                max: preDate,
                                btns: ['clear', 'confirm'],
                                done(value, date) {
                                    endDateSelected = value
                                }
                            })
                        }
                    })
                })

                // 2020-02-06 Version1.0


                let depSelected = []; // 选择的部门
                let memberSelected = []; // 选择的成员
                let totalDatalist = []; // 部门、成员总集合
                // 点击 成员部门 打开添加模态框 且 重新加载已选择的成员
                $("#member_depart_select").click(function () {
                    $("#addperson_modal").modal("show");
                    let html1 = "";
                    let html2 = "";
                    for (let i = 0; i < depSelected.length; i++) {
                        html1 += `
                        <div class="dep_item">
                            <i class="iconfont icon-wenjianjia"></i>
                            <span data-id="${depSelected[i].id}" data-pid="${depSelected[i].pid}" data-dep="${depSelected[i].department}">${depSelected[i].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `;
                    }
                    for (let j = 0; j < memberSelected.length; j++) {
                        html2 += `
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${memberSelected[j].id}" data-pid="${memberSelected[j].pid}" data-dep="${memberSelected[j].department}">${memberSelected[j].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `;
                    }
                    $("#selected_department").html(html1);
                    $("#selected_members").html(html2);
                });

                //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
                $(".protree_container").ProTree({
                    arr: arr,
                    close: true,
                    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                    callback: function (id, name, pid, department) {
                        let data = {
                            id,
                            name,
                            pid,
                            department
                        };
                        console.log('data', data);
                        if (department == "true") {
                            depSelected.push(data);
                            $("#selected_department").append(`
                        <div class="dep_item">
                            <i class="iconfont icon-wenjianjia"></i>
                            <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}">${data.name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                        } else {
                            memberSelected.push(data);
                            $("#selected_members").append(`
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}">${data.name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                        }
                    }
                });

                // 删除部门、成员
                $(".department_members").on("click", ".delete_dep_mem", function () {
                    let id = $(this)
                        .siblings("span")
                        .attr("data-id");
                    let dep = $(this)
                        .siblings("span")
                        .attr("data-dep");
                    $(this)
                        .parent()
                        .remove();
                    if (dep == "true") {
                        for (let i = 0; i < depSelected.length; i++) {
                            if (id == depSelected[i].id) {
                                depSelected.splice(i, 1);
                                break;
                            }
                        }
                    } else {
                        for (let i = 0; i < memberSelected.length; i++) {
                            if (id == memberSelected[i].id) {
                                memberSelected.splice(i, 1);
                                break;
                            }
                        }
                    }
                });
                function getMember(depMember, depList) {
                    if (depList && depList.length > 0) {
                        for (let i = 0; i < depList.length; i++) {
                            if (depList[i].department == true || depList[i].department == 'true') {
                                let m = []
                                for (let j = 0; j < arr.length; j++) {
                                    if (arr[j].pid == depList[i].id) {
                                        m.push(arr[j])
                                    }
                                }
                                getMember(depMember, m)
                            } else {
                                depMember.push(depList[i])
                            }
                        }
                    }
                }

                // 拿到需要发送的部门、成员列表
                $("#submit_dep_member").click(function () {
                    totalDatalist = [];
                    totalDatalist = totalDatalist.concat(depSelected, memberSelected); // 选择的部门、成员
                    let member_depart_select = ""
                    for (let i = 0; i < totalDatalist.length; i++) {
                        member_depart_select += `${totalDatalist[i].name},`
                    }
                    member_depart_select = member_depart_select.substring(0, member_depart_select.length - 1)
                    console.log(member_depart_select)
                    if (member_depart_select == '') {
                        $("#member_depart_select").text('全部')
                    } else {
                        $("#member_depart_select").text(member_depart_select)
                    }

                    console.log('totalDatalist', totalDatalist)
                    // 取出选中的部门中的所有成员
                    let depMember = []
                    getMember(depMember, totalDatalist) // 将选择的部门中的成员取出来

                    // 成员去重
                    for (let i = 0; i < depMember.length; i++) {
                        for (let j = 0; j < memberSelected.length; j++) {
                            memberSelected[j].id = parseInt(memberSelected[j].id)
                            memberSelected[j].pid = parseInt(memberSelected[j].pid)
                            if (memberSelected[j].department == "true") {
                                memberSelected[j].department = true
                            } else {
                                memberSelected[j].department = false
                            }
                            if (depMember[i].id == parseInt(memberSelected[j].id)) {
                                depMember.splice(i, 1)
                            }
                        }
                    }
                    let newMemberList = depMember.concat(memberSelected)
                    console.log(
                        "添加人",
                        newMemberList
                    );
                    $("#addperson_modal").modal("hide");
                });

            })

        })


        // 表格分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'paging',
                limit: 5,
                theme: '#E51C23',
                count: 20, //数据总数，从服务端得到
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        //do something
                    }
                }
            })
        });
    </script>
</body>

</html>